<template>
  <div>
    <h1>您目前的积分：{{this.points}}</h1>
    <div class="calendar-wrapper">
      <Calendar
        ref="calendar"
        v-on:changeMonth="changeDate"
        :markDate=hasPunchin
        :agoDayHide="agoDayHideTime"
        :futureDayHide="futureDayHideTime"/>
    </div>
    <div class="point_text">
      <button class="button" @click="signIn">签到</button>
      <!--  <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>-->
    </div>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
import {formatDateToSlashString, getDateStringOfYesterday} from '@/utils/DateUtil';
import {requestGetPunchInDays, requestPunchIn, requestPunchInCertain} from '@/api/punchin';
import {point} from '@/api/point';

export default {
  name: 'PunchinCalendar',
  components: {
    Calendar
  },
  data () {
    return {
      // 用户当前积分
      points: '',
      punchInBtnOptions: {
        text: '今日签到',
        disabled: false
      },
      hasPunchin: [],
      agoDayHideTime: new Date(getDateStringOfYesterday()).getTime().toString().slice(0, 10),
      futureDayHideTime: new Date().getTime().toString().slice(0, 10)
    };
  },
  created () {
    requestGetPunchInDays().then(res => {
      if (res.data.code === '00000') {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let today = date.getDate();
        for (let day of res.data.data) {
          this.hasPunchin.push(year + '/' + month + '/' + day);
          if (day === today) {
            this.punchInBtnOptions.text = '今日已签到';
            this.punchInBtnOptions.disabled = true;
          }
        }
      }
    });
  },
  // 生命周期钩子函数，初始化数据
  mounted () {
    this.init();
  },
  methods: {
    changeDate (data) {
      let date = new Date(Date.parse(data));
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      requestPunchInCertain({year, month}).then(res => {
        if (res.data.code === '00000') {
          for (let day of res.data.data) {
            this.hasPunchin.push(year + '/' + month + '/' + day);
          }
        }
      });
    },
    signIn () {
      // 发送网络请求
      requestPunchIn().then(res => {
        if (res.data.code === '00000') {
          this.hasPunchin.push(formatDateToSlashString(new Date()));
          this.punchInBtnOptions.text = '已签到';
          this.punchInBtnOptions.disabled = true;
        }
        if (res.data.code === '10000') {
          this.$Message.success(res.data.message);
        }
      });
    },
    init (url, config) {
      point().then((res) => {
        console.log(res.data);
        // 处理类型
        // menus获取数据
        this.points = res.data.data;
        console.log(this.points);
      });
    }
  }
};
</script>

<style>
.calendar-wrapper {
  width: 332px;
  margin-top: 40px;
  position: absolute;
  left: 55%;
  top:40%;
  transform: translate(-50%,-50%);
}

.calendar-wrapper .wh_container .wh_content_all {
  background-color: rgba(60, 60, 67, .7);
}

.calendar-wrapper .wh_container .wh_content_all .wh_content .wh_content_item .wh_isToday {
  /*background-color: #2DB55D;*/
  background: none;
}

/*鼠标选择某天的背景*/
.calendar-wrapper .wh_container .wh_content_all .wh_content .wh_content_item .wh_chose_day {
  background-color: #3296cc;
}

/*被标记的某些天的背景*/
.calendar-wrapper .wh_container .wh_content_all .wh_content .wh_content_item > .wh_isMark {
  background-color: #3296cc;
}

/*积分*/
.point_text{
  width: 200px;
  height: 50px;
  position: absolute;
  left: 52%;
  bottom: 15%;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

</style>
